<extend name="Base/common"/>

<block name="header">

</block>

<block name="side">
    <!-- 左侧 nav-->
</block>


<block name="body">
    <div id="tobiao" style="width:5%;height:50px;margin-left: 5%;margin-top: 10%"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('tobiao'));
        var easingFuncs = {
           C:function (k) {
                return k * k;
            },
        };

        var N_POINT = 30;

        var grids = [];
        var xAxes = [];
        var yAxes = [];
        var series = [];
        var titles = [];
        var count = 0;
        echarts.util.each(easingFuncs, function (easingFunc, name) {
            var data = [];
            for (var i = 0; i <= N_POINT; i++) {
                var x = i / N_POINT;
                var y = easingFunc(x);
                data.push([x, y]);
            }
            grids.push({
                show: true,
                borderWidth: 0,
                backgroundColor: '#fff',
                shadowColor: 'rgba(0, 0, 0, 0.3)',
                shadowBlur: 2
            });
            xAxes.push({
                type: 'value',
                show: false,
                min: 0,
                max: 1,
                gridIndex: count
            });
            yAxes.push({
                type: 'value',
                show: false,
                min: -0.4,
                max: 1.4,
                gridIndex: count
            });
            series.push({
                name: name,
                type: 'line',
                xAxisIndex: count,
                yAxisIndex: count,
                data: data,
                showSymbol: false,
                animationEasing: name,
                animationDuration: 1000
            });
            titles.push({
                textAlign: 'center',
                text: name,
                textStyle: {
                    fontSize: 12,
                    fontWeight: 'normal'
                }
            });
            count++;
        });

        var rowNumber = Math.ceil(Math.sqrt(count));
        echarts.util.each(grids, function (grid, idx) {
            grid.left = ((idx % rowNumber) / rowNumber * 100 + 0.5) + '%';
            grid.top = (Math.floor(idx / rowNumber) / rowNumber * 100 + 0.5) + '%';
            grid.width = (1 / rowNumber * 100 - 1) + '%';
            grid.height = (1 / rowNumber * 100 - 1) + '%';

            titles[idx].left = parseFloat(grid.left) + parseFloat(grid.width) / 2 + '%';
            titles[idx].top = parseFloat(grid.top) + '%';
        });

        option = {
            title: titles.concat([{
//                text: 'Different Easing Functions',
                top: 'bottom',
                left: 'center'
            }]),
            grid: grids,
            xAxis: xAxes,
            yAxis: yAxes,
            series: series
        };

        myChart.setOption(option);
    </script>
</block>